<template>
  <van-popup v-model="show" position="bottom" :style="{ height: '100%' }">
    <div class="perm-container">
      <van-nav-bar
        left-text="管理员身份认证"
        left-arrow
        @click-left="onClickLeft"
      />
      <div class="bgc">
        <div class="pic">
          <van-image
            width="100%"
            class="avatar"
            src="https://img.yzcdn.cn/vant/cat.jpeg"
            round
            fit="cover"
          />
          <span class="text">XXX</span>
        </div>
      </div>
      <div class="box">
        <van-cell-group>
          <van-cell
            title="请输入您的用户名和密码进行认证"
            icon="stop"
            size="40px"
          >
          </van-cell>
          <van-form @failed="onFailed">
          <van-field v-model="username" label="用户账户:" :rules="[{ required: true, message: '请输入内容' }]"  />
          <van-field v-model="password" label="用户密码:" :rules="[{ required: true, message: '请输入内容' }]" />
          </van-form>
        </van-cell-group>
      </div>
    </div>
  </van-popup>
</template>

<script>
export default {
  data () {
    return {
      username: '',
      password: '',
    }
  },
  props: {
    show: {
      type: Boolean,
      require: true,
    },
  },
  methods: {
    onClickLeft () {
      this.$emit('update:show', false)
    },
    onFailed () {

    },
  },
}
</script>

<style scoped lang="scss">
.perm-container {
  background-color: #f8f8f8;
  height: 100vh;
  .bgc {
    position: relative;
    height: 300px;
    background-color: #3f51b5;
    z-index: 99999999999;
  }
  .pic {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .avatar {
      width: 160px !important;
      height: 160px;
    }
    .text {
      margin-top: 30px;
      font-size: 35px;
      font-weight: 600;
      color: #fff;
    }
  }
  .box {
    position: relative;
    transform: translateY(-55px);
    margin: 0 30px;
    height: 900px;
    padding: 0 20px;
    background-color: #fff;
    border-radius: 20px;
    z-index: 9999999999999;
  }
  .remind {
    font-size: 22px;
  }
  .van-icon-stop {
    color: #3f51b5;
  }
}
</style>
